<template>
  <fks-dialog
    width="650px"
    :visible.sync="dialogVisible"
    @close="close"
    title="新增实例"
  >
    <fks-form
      v-if="dialogVisible"
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="150px"
    >
      <!-- 基本信息 -->
      <fks-form-item :span="24" prop="name" label="实例名称">
        <fks-input placeholder="请填写" v-model="formData.name" />
      </fks-form-item>
      <fks-form-item :span="24" prop="port" label="实例端口">
        <fks-input placeholder="请填写" v-model="formData.port" />
      </fks-form-item>
      <fks-form-item :span="24" prop="projectId" label="UE工程">
        <fks-select
          v-model="formData.projectId"
          placeholder="请选择"
          style="width: 100%"
          @change="selectUefile"
        >
          <fks-option
            v-for="item in uefiles"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </fks-select>
      </fks-form-item>
      <!-- https -->
      <fks-form-item :span="24" label="是否启用https">
        <fks-switch
          v-model="formData.useHttps"
          active-color="#13ce66"
          inactive-color="#a3a3a3"
        >
        </fks-switch>
      </fks-form-item>
      <fks-form-item
        v-show="formData.useHttps"
        :span="24"
        label="https key文件"
      >
        <fks-input
          placeholder="请填写服务器中key文件路径"
          v-model="formData.httpsKeyFile"
        />
      </fks-form-item>
      <fks-form-item
        v-show="formData.useHttps"
        :span="24"
        label="https cert文件"
      >
        <fks-input
          placeholder="请填写服务器中cert文件地址"
          v-model="formData.httpsCertFile"
        />
      </fks-form-item>
      <!-- 中继服务器 -->
      <fks-form-item :span="24" label="是否启用中继服务">
        <fks-switch
          v-model="formData.useRelay"
          active-color="#13ce66"
          inactive-color="#a3a3a3"
        >
        </fks-switch>
      </fks-form-item>
      <fks-form-item v-show="formData.useRelay" :span="24" label="stun地址">
        <fks-input placeholder="请填写stun地址" v-model="formData.stun" />
      </fks-form-item>
      <fks-form-item v-show="formData.useRelay" :span="24" label="turn地址">
        <fks-input placeholder="请填写turn地址" v-model="formData.turn" />
      </fks-form-item>
      <fks-form-item v-show="formData.useRelay" :span="24" label="中继用户名">
        <fks-input
          placeholder="请填写用户名"
          v-model="formData.relayUsername"
        />
      </fks-form-item>
      <fks-form-item v-show="formData.useRelay" :span="24" label="中继密码">
        <fks-input placeholder="请填写密码" v-model="formData.relayPassword" />
      </fks-form-item>
    </fks-form>
    <div slot="footer">
      <fks-button
        type="primary"
        :loading="submitLoading"
        icon="fks-icon-check"
        @click="onSubmit"
      >
        <span>确定</span>
      </fks-button>
    </div>
  </fks-dialog>
</template>
<script>
import { createUeInstance } from "../apis/ueinstance";
import { getUeProject } from "../apis/ueproject";
export default {
  name: "addDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: this.visible,
      formData: {
        name: "",
        port: null,
        projectId: "",
        projectName: "",
        runStatus: false,
        connectStatus: false,
        useHttps: false,
        httpsKeyFile: "",
        httpsCertFile: "",
        useRelay: false,
        stun: "",
        turn: "",
        relayUsername: "",
        relayPassword: "",
      },
      submitLoading: false,
      uefiles: [],
    };
  },
  computed: {
    rules() {
      return {
        name: [
          {
            required: true,
            message: "请填写实例名称",
            trigger: "blur",
          },
        ],

        port: [
          {
            required: true,
            message: "请填写实例端口",
            trigger: "blur",
          },
        ],
        projectId: [
          {
            required: true,
            message: "请选择UE工程",
            trigger: "change",
          },
        ],
      };
    },
  },
  watch: {
    dialogVisible: {
      deep: true,
      handler(val) {
        this.$emit("update:visible", val);
      },
    },
    visible(val) {
      this.dialogVisible = val;
    },
  },
  methods: {
    /**
     * @description: 获取UE工程列表
     * @return {*}
     */
    getUefiles() {
      const infinityPageSize = -1;
      const data = {
        pageNo: 1,
        pageSize: infinityPageSize,
      };
      getUeProject(data).then((res) => {
        if (res.status) {
          this.uefiles = [...res.data];
        }
      });
    },
    /**
     * @description: 选择UE工程文件
     * @return {*}
     */
    selectUefile(val) {
      const target = this.uefiles.find((item) => item.id == val);
      if (target) {
        this.formData.projectName = target.name;
      }
    },
    /**
     * @description: 关闭弹窗
     * @return {*}
     */
    close() {
      this.formData = {};
      this.$emit("update:visible", false);
    },

    /**
     * @description: 提交表单
     * @return {*}
     */
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          createUeInstance(this.formData)
            .then((res) => {
              if (res.status) {
                this.$message({
                  message: "添加成功！",
                  type: "success",
                });
                this.close();
                this.$emit("refresh");
              }
            })
            .finally(() => {
              this.submitLoading = false;
            });
        }
      });
    },
  },
  created() {
    this.getUefiles();
  },
};
</script>
<style lang="scss" scoped></style>
